<template>
  <div>
    <h1>app</h1>
    <!-- 
      ajax请求（把原生ajax的步骤及相关代码背过）
      axios 包  最流行   
      vue-resource  以前有用的

     -->
    <button @click="sendAjax">发送ajax请求</button>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },

  components: {},

  computed: {},

  beforeMount() {},
  created() {
    /*  console.dir(this.$http);
    const url = "https://api.github.com/search/repositories?q=TMD&sort=stars";
    // 发送ajax请求可以在created mounted中执行
    this.$http
      .get(url)
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      }); */
    this.sendAjax();
  },
  mounted() {
    /* console.dir(this.$http);
    const url = "https://api.github.com/search/repositories?q=TMD&sort=stars";
    // 发送ajax请求可以在created mounted中执行
    this.$http
      .get(url)
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      }); */
    /* 当已打开页面就有数据，这种ajax，放到created或者mounted中，而点击某些按钮，或者触发某些事件发送ajax，放到methods */
    this.sendAjax();
  },

  methods: {
    sendAjax() {
      console.dir(this.$http);
      const url = "https://api.github.com/search/repositories?q=TMD&sort=stars";
      // 发送ajax请求可以在created mounted中执行
      this.$http
        .get(url)
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  watch: {},
};
</script>
<style lang='' scoped>
</style>